<template>
  <div class="">
    <div class="hearder-search">
      <div class="breadcrumb-container">
        <div class="search_box">
          <el-input v-model="searWord.name" placeholder="填写区角名称" @keyup.enter.native="searchBtn" size="small"
                    class="w-140"></el-input>
          <el-input v-model="searWord.real_name" placeholder="填写区角架构人" @keyup.enter.native="searchBtn" size="small"
                    class="w-140"></el-input>
<!--          <el-select placeholder="教室公共区角" v-model="cornername" size="small" class="w-140" @change="coenerTypeChange">-->
<!--            <el-option :label="item.name" :value="item.id" v-for="(item, index) in cornerList"-->
<!--                       :key="index"></el-option>-->
<!--          </el-select>-->
<!--          <el-select placeholder="年段" v-model="searWord.section_id" size="small" @change="sectionChange" class="w-140"-->
<!--                     v-if="cornertype">-->
<!--            <el-option :label="item.section_name" :value="item.id" v-for="(item, index) in sectionList"-->
<!--                       :key="index"></el-option>-->
<!--          </el-select>-->
<!--          <el-select placeholder="班级" v-model="searWord.class_id" size="small" class="w-140" v-if="cornertype">-->
<!--            <el-option :label="item.class_name" :value="item.id" v-for="(item, index) in classesList"-->
<!--                       :key="index"></el-option>-->
<!--          </el-select>-->
        </div>
        <el-button type="primary" @click="searchBtn" size="small"><i class="el-icon-search"></i>搜索</el-button>
        <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>重置刷新</el-button>
      </div>
    </div>
    <!--本体列表，数据 -->
    <div class="table-body">
      <div class="table-body-box">
        <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableoption.tableStripe"
            :border="tableoption.tableBorder"
            tooltip-effect="dark"
            style="width: 100%"
            header-cell-class-name="table-text-c"
            cell-class-name="table-text-c">
          <el-table-column
              prop="id"
              label="ID"
              width="90"
              align="center">
          </el-table-column>
          <el-table-column
              label="现场图片"
              width="100">
            <template slot-scope="scope">
              <ImagePreview :src="scope.row.pic" width="40px" height="40px"></ImagePreview>
            </template>
          </el-table-column>
          <el-table-column
              prop="name"
              label="区角名称">
          </el-table-column>
          <el-table-column
              label="现场位置">
            <template slot-scope="scope">
              <span
                  v-if="scope.row.section">{{ scope.row.section.section_name }}{{ scope.row.classes.class_name }}</span>
              <span v-else>{{ scope.row.public_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="classes"
              width="80"
              label="架构人">
            <template slot-scope="scope">
              {{ scope.row.user?scope.row.user.realname:'' }}
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              width="200">
            <template slot-scope="scope">
              <el-button size="small" @click="addActive(scope.row)">查询预约学生信息</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
          background
          :page-size="page.pagesize"
          :current-page="page.pageindex"
          layout="total, prev, pager, next"
          :total="page.total"
          @current-change="handleSizeChange"></el-pagination>
    </el-col>
    <cornerStudent :visible.sync="queryCorner.cornerVisible" :userOption="queryCorner.userInfo"></cornerStudent>
  </div>

</template>

<script>
import cornerStudent from '@/components/dialog/query/cornerStudent'
import {pagination, tableoption} from '@/utils/util.js'

export default {
  components: {
    cornerStudent
  },
  data () {
    return {
      tableoption: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [], // 数据列表
      // 搜索
      searWord: {
        name: '',
        real_name: '',
        // section_id: '',
        // class_id: ''
      },
      // 弹窗
      dialogVisible: false,
      editIndex: null,
      foodOption: '',
      // 预览
      imgsrcCheck: '',
      dialogImgVisible: false,
      classesListNew: [],
      sectionList: [],
      classesList: [],
      queryCorner: {
        cornerVisible: false,
        userInfo: null
      }
    }
  },
  created () {
  },
  methods: {
    // 初始化
    InitFn () {
      this.searWord.p = this.page.pageindex
      this.$post(this.api.admin_corner_teacher, this.searWord).then((response) => {
        if (response.code === 0) {
          // status 0关闭 1开启 switchvalue
          let array_ = []
          for (let i in response.list.data) {
            response.list.data[i].create_time = response.list.data[i].create_time.split(' ')[0]
            array_.push(response.list.data[i])
          }
          this.arryList = array_
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 分页
    handleSizeChange (val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 搜索
    searchBtn () {
      this.page.pageindex = 1
      this.InitFn()
    },
    addActive (option) {
      this.queryCorner.userInfo = option
      this.queryCorner.cornerVisible = true
    },
    // 刷新页面
    refreshFn () {
      this.searWord.name = ''
      this.searWord.real_name = ''
      this.page.pageindex = 1
      this.InitFn()
    }
  },
  mounted () {
  }
}
</script>
